<template>
  <div class="audit">
      <div class="select" style="position: relative">
          <el-input
              placeholder="搜索趣ID、QQ号、游戏昵称"
              style="width:240px;"
              clearable
              v-model.trim="searchVal">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-button type="primary" class="btn" style="margin-left:20px" @click="getList(1)">查询</el-button>
          <span class="input-title">状态</span>
          <el-select v-model="auditType" placeholder="请选择" @change="statusChange">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
          </el-select>
          <span class="input-title">筛选</span>
          <el-select v-model="screenVal" placeholder="请选择" @change="screenChange">
              <el-option
                v-for="item in screenOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
          </el-select>
          <!-- 添加平台 -->
          <span class="input-title">平台</span>
          <el-select v-model="areaType" placeholder="请选择" @change="typeStatusChange">
            <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <!-- <el-button type="success" class="btn" @click="exportData" style="position: absolute; right: 10px">导出</el-button> -->
      </div>
      <div class="table-box">
          <el-table :data="tableData" ref="table" border style="width: 100%" v-loading="loading" @sort-change="sortChange">
              <el-table-column prop="userId" label="趣ID"></el-table-column>
              <el-table-column prop="nickName" label="昵称"></el-table-column>
              <el-table-column prop="accountNo" label="QQ号/昵称/平台">
                  <template slot-scope="scope">
                    <div>{{ scope.row.accountNo }}</div>
                    <div>{{ scope.row.roleName }}</div>
                    <div>平台：{{ scope.row.areaType === 1 ? '安卓' : scope.row.areaType === 2 ? 'IOS' : '-' }}</div>
                    <div v-if="scope.row.accountBlackDesc" style="color: red"> {{ scope.row.accountBlackDesc }}</div>
                  </template>
              </el-table-column>
              <el-table-column prop="serverName" label="区服"></el-table-column>
              <el-table-column prop="worth" label="当前估值" sortable="custom">
                <template slot-scope="scope">
                  <span>{{ scope.row.worth }}元</span>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="提交时间">
                  <template slot-scope="scope">
                    <span>{{ formatDate(scope.row.createTime) }}</span>
                  </template>
              </el-table-column>
              <el-table-column prop="changeInfo" label="道具变化"></el-table-column>
              <el-table-column prop="sumIncome" label="累计收益" sortable="custom">
                <template slot-scope="scope">
                  <span>{{ scope.row.sumIncome }}元</span>
                </template>
              </el-table-column>
              <el-table-column prop="auditStatus" label="审核状态">
                  <template slot-scope="scope">
                    <span style="color: #67C23A;" v-if="scope.row.auditStatus === 0">待审核</span>
                    <span style="color: red;" v-if="scope.row.auditStatus === -1">已拒绝</span>
                    <span v-if="scope.row.auditStatus === 1">已通过</span>
                    <span v-if="scope.row.auditStatus === -2">用户注销</span>
                  </template>
              </el-table-column>
              <el-table-column label="管理">
                  <template slot-scope="scope">
                    <div><el-button @click="goDetail(scope.row)" type="text" size="small">查看详情</el-button></div>
                    <div v-if="scope.row.auditStatus === 0">
                      <el-button @click="setAuditStatus(scope)" type="text" size="small">通过</el-button>
                    </div>
                    <div v-if="scope.row.auditStatus === 1">
                      <span style="color: #67C23A;">已通过</span>
                    </div>
                  </template>
              </el-table-column>
          </el-table>
          <div class="tools">
              <el-pagination
                  @size-change="sizeChange"
                  @current-change="pageChange"
                  :current-page="pageNum"
                  :page-sizes="_pageSizes"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
              </el-pagination>
          </div>
      </div>
  </div>
</template>
<script>
import { formatDate } from '@/utils/utils'
import { export2Excel } from '@/excel/util'

export default {
    props: ['activeName'],
    data  () {
        return {
            loading: false,
            options: [
              {
                value: 0,
                label: '全部'
              },
              {
                value: 2,
                label: '已通过'
              },
              {
                value: 1,
                label: '未处理'
              },
              {
                value: -2,
                label: '用户注销'
              }
            ],
            screenOptions: [
                {
                  value: 0,
                  label: '全部'
                },
                {
                  value: 1,
                  label: '首次提交'
                },
                {
                  value: 2,
                  label: '非首次提交'
                }
            ],
            areaType: 0,
            typeOptions: [ //平台选择字段
              {
                value: 0,
                label: '全部'
              },
              {
                value: 1,
                label: '安卓'
              },
              {
                value: 2,
                label: 'IOS'
              }
            ],
            screenVal: 0, // 首次提交
            auditType: 1, // 审核状态
            searchVal: '',
            tableData: [],
            pageNum: 1,
            pageSize: this._pageSize,
            total: 0,
            type: '',
            order: ''
        }
    },
    watch: {
        activeName (name) {
            if (name === '1') {
                this.getList(1)
            }
        }
    },
    created () {
        if (this.activeName === '1') {
          this.getList(1)
        }
    },
    methods: {
      // 打印
        exportData() {
          this.columns = [
          {
              title: '趣ID', key: 'userId'
          },
          {
              title: 'QQ号', key: 'accountNo'
          },
          // {
          //     title: '昵称', key: 'roleName'
          // },
          {
              title: '平台', key: 'areaTypeDesc'
          },
          {
              title: '区服', key: 'serverName'
          },
          {
              title: '当前估值(元)', key: 'worth'
          },
          
          {
              title: '提交时间', key: 'createTimeDesc'
          },
          {
              title: '道具变化', key: 'changeInfo'
          },
          {
              title: '累计收益(元)', key: 'sumIncome'
          },
          {
              title: '审核状态', key: 'auditStatusDesc'
          }
          ]
          this.getList(1, true)
        },
        goDetail (item) {
            const { href } = this.$router.resolve({
                path: '/hpjy/accDetail',
                query: {
                  auditId: item.auditId,
                  dataId: item.dataId
                }
            })
            window.open(href, '_blank')
        },
        typeStatusChange (areaType) {
          this.areaType = areaType
          this.getList(1)
        },
        async getList (pageNum, flag) {
            this.loading = true
            this.pageNum = pageNum
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                areaType: this.areaType
            }
            if (flag) {
              params.pageSize = 1000000
            }
            if (this.searchVal) params.keyWord = this.searchVal
            if (this.auditType !== 0) params.auditType = this.auditType
            if (this.screenVal !== 0) params.commitType = this.screenVal
            if (this.type) params.type = this.type
            if (this.sort) params.sort = this.sort
            let res = await this.$http.get('/peace/selectPropAuditList', { params })
            if (res.code === '0') {
                if (flag) {
                  res.data.list && res.data.list.forEach((item) => {
                    item.createTimeDesc = this.formatDate(item.createTime)
                    if (item.auditStatus === 0) {
                      item.auditStatusDesc = '待审核'
                    }
                    if (item.auditStatus === -1) {
                      item.auditStatusDesc = '已拒绝'
                    }
                    if (item.auditStatus === 1) {
                      item.auditStatusDesc = '已通过'
                    }
                    if (item.auditStatus === -2) {
                      item.auditStatusDesc = '用户注销'
                    }
                  })
                  export2Excel(this.columns, res.data.list, '和平精英-租号待审核账号列表')
                } else {
                  this.tableData = res.data.list
                  this.total = res.count
                  this.$emit('getAuditCount', res.count)
                }
                
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.loading = false
        },
        // 后端排序
        sortChange ({ column, prop, order }) {
            this.sort = order || ''
            // 如果没有 sort prop 置为空
            if (!this.sort) {
                this.type = null
            } else {
                if (this.sort === 'ascending') {
                    this.sort = 'asc'
                } else {
                    this.sort = 'desc'
                }
                this.type = prop
            }
            this.getList(1)
        },
        // 操作审核状态
        setAuditStatus (scope) {
            this.$http.post('/peace/operatePropAuditStatus', {
                auditId: scope.row.auditId,
                operateStatus: 1
            }).then(res => {
                if (res.code === '0') {
                    this.$message.success('已通过')
                    this.$set(this.tableData[scope.$index], 'auditStatus', 1)
                } else {
                    this.$message({
                        type: 'error',
                        message: '系统异常，请稍后再试'
                    })
                }
            })
        },
        searchChange (val) {
            console.log(val)
        },
        // 筛选
        statusChange (val) {
            console.log(val)
            this.auditType = val
            this.getList(1)
        },
        screenChange (val) {
            this.screenVal = val
            this.getList(1)
        },
        // 页容切换
        sizeChange (num) {
            this.pageSize = num
            this.getList(1)
        },

        // 页码切换
        pageChange (num) {
            this.pageNum = num
            this.getList(this.pageNum)
        },
        formatDate (time) {
          return formatDate(time)
        }
    }
}
</script>
<style lang="scss" scoped>
  .audit {
    .select{
      font-size: 13px;
      margin: 20px 0;
      span{
        margin-right: 5px;
        color: #333333;
      }
      .input-title{
        margin-left: 10px;
      }
    }
    .tools{
      margin-top: 20px;
      text-align: right;
    }
  }
</style>
